<script setup lang="ts">
import * as Icons from '@/icons'
import type { TabItem } from '@/types/store'
import Sortable from 'sortablejs'
import { useTabStore } from '@/stores'

export interface Props {
  tabs: TabItem[]
}

withDefaults(defineProps<Props>(), {
  tabs: () => []
})

const tabStore = useTabStore()

const tabRef = ref()
onMounted(() => {
  new Sortable(tabRef.value.$el.querySelector('.el-tabs__nav'), {
    animation: 150,
    onEnd: (evt) => {
      tabStore.exchangeByIndex(evt.newIndex, evt.oldIndex)
    }
    // ghostClass: 'sortable-ghost'
  })
})
</script>

<template>
  <el-tabs type="card" ref="tabRef">
    <el-tab-pane v-for="item in tabs" :key="item.name" :name="item.name" :closable="item.closable">
      <template #label>
        <el-icon v-if="item.icon"> <component :is="Icons[item.icon]" /> </el-icon>
        <span class="ml-2">{{ item.title }}</span>
      </template>
      <!-- {{ item.content }} -->
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="scss">
.el-tabs {
  user-select: none;
  :deep(.el-tabs__nav-wrap) {
    padding: 0 20px;
  }
  // :deep(.el-tabs__nav-wrap::after) {
  //   height: 1px;
  // }
  :deep(.el-tabs__header) {
    margin-bottom: 0;
    box-sizing: border-box;
  }

  :deep(.sortable-drag) {
    // 拖拽的时候样式
    background-color: white;
  }

  :deep(.el-tabs__nav-next),
  :deep(.el-tabs__nav-prev) {
    line-height: 40px;

    .el-icon {
      vertical-align: middle;
    }
  }
}

.el-tabs--card {
  & > :deep(.el-tabs__header) {
    .el-tabs__nav {
      border: none;
    }
    .el-tabs__item {
      border-bottom: none;
    }
    .el-tabs__item.is-active {
      border-bottom: 2px solid var(--el-color-primary);
    }
    // .el-tabs__item:first-child {
    //   border-left: 1px solid var(--el-border-color-light);
    // }
    // .el-tabs__item:last-child {
    //   border-right: 1px solid var(--el-border-color-light);
    // }
  }
}
</style>
